<template>
    <div class="tabbar">
        <div ref="wrapper" class="wrapper">
            <div class="content" ref="content">
                <!--上拉的东西-->
                <div class="top">上拉刷新</div>
                <ul>
                    <li v-for="item in data" style="line-height:100px">{{ item }}</li>
                </ul>
                <!--上拉的东西-->
                <div class="bottom">下拉加载</div>
            </div>
        </div>
    </div>
</template>

<script>
import BScroll from "better-scroll"
export default {
    data() {
        return {
            data: [0, 1, 2, 3, 4, 5, 6, 8, 8, 8, 8, 8],
            height: 0,
        }
    },
    methods: {
        getData() {
            return new Promise(resolve => {  //模拟数据请求
                setTimeout(() => {
                    const arr = [];
                    for (let i = 0; i < 10; i++) {
                        this.data.push(i)
                    }
                    resolve(arr)
                }, 1000)
            })
        },
    },
    watch: {
        data(val) {
            this.$nextTick(() => {
                this.scroll.refresh()
                this.scroll.finishPullUp()
            })
        }
    },
    computed: {

    },
    mounted() {
        this.scroll = new BScroll(this.$refs.wrapper, {
            // 上拉加载
            pullUpLoad: {
                // 当上拉距离超过30px时触发 pullingUp 事件
                threshold: -30
            },
            // 下拉刷新
            pullDownRefresh: {
                // 下拉距离超过30px触发pullingDown事件
                threshold: 30,
                // 回弹停留在距离顶部20px的位置
                stop: 20
            }
        })
        this.scroll.on('pullingUp', () => {
            console.log('处理上拉加载操作')
            this.getData().then(res => {
                console.log('asfsaf')
                // 事情做完，需要调用此方法告诉 better-scroll 数据已加载，否则下拉事件只会执行一次
                //           this.scroll.finishPullUp()
            })
        })
        this.scroll.on('pullingDown', () => {
            console.log('处理下拉刷新操作')
            this.getData().then(res => {
                // 事情做完，需要调用此方法告诉 better-scroll 数据已加载，否则下拉事件只会执行一次
                this.scroll.finishPullDown()
            })
        })
    }
}
</script>

<style>
.top {
    position: fixed;
    top: -40px;
}

.bottom {
    position: fixed;
    bottom: -40px;
}

/*对外层div进行了高度上的限制*/
.wrapper {
    position: fixed;
    left: 0;
    top: 0;
    bottom: 0;
    width: 100%;
    height: 100vh;
    overflow: hidden;
}

.content {
    width: 100%;
    /*height:800px;*/
    /* background: blue; */
}
</style>